<template>
  <view class="basicInformation allColumnCenter">
    <view class="bag">
      <img class="bag_image" src="/static/shiqin-images/01.png" mode="widthFix">
    </view>
    <header-title title="基本信息" :isDisplayBack="true"></header-title>
    <view class="tips mt-131 z-1">
      <text class="tips_overText">基本信息</text>
    </view>
    <view class="tips mt-12 row z-1">
      <text class="tips_littleText">例如：</text>
      <text class="tips_littleText">刘德华姓</text>
      <text class="tips_colorText">刘</text>
      <text class="tips_littleText">名</text>
      <text class="tips_colorText">德华</text>
    </view>
    <!--  中间姓名填写  -->
    <view class="basicInformation_content mt-86 rowSpaceBetween z-1">
      <view class="basicInformation_content_surname allRowCenter" @click.stop="surnameFocus">
        <view class="basicInformation_content_surname_right allRowCenter" @click.stop>
          <input :focus="form.surnameFocusFlag" type="text" v-model="form.surname" placeholder="尊姓"
                 placeholder-class="placeholder" class="basicInformation_input" @input="suernameInput"
                 @blur="surnameBlur"></input>
        </view>
      </view>
      <view class="basicInformation_content_surname allRowCenter" @click.stop="nameFocus">
        <view class="basicInformation_content_surname_right allRowCenter" @click.stop>
          <input :focus="form.nameFocusFlag" type="text" :value="form.name" placeholder="大名"
                 placeholder-class="placeholder" maxlength="5"
                 class="basicInformation_input" @input="nameInput" @blur="nameBlur"></input>
        </view>
      </view>
    </view>
    <!--  选择生日  -->
    <view class="basicInformation_dateBirth alignItemsCenter mt-86 z-1" @click.stop="openBetterCalendar">
      <view class="basicInformation_dateBirth_right allRowCenter">
        <text class="basicInformation_dateBirth_right_text">{{
            form.dateBirth ? form.dateBirth : '点击选择您的生日'
          }}
        </text>
      </view>
    </view>
    <view class="basicInformation_finish allRowCenter mt-188 z-1" @click.stop="goToPath">
      <text class="basicInformation_finish_text">完成</text>
    </view>

    <better-calendar class="z-999"
                     ref="betterCalendarRef"
                     :showCalendar="showCalendar"
                     @confirm="selectDate"
                     @cancel="showCalendar = false"
    ></better-calendar>
  </view>
</template>
<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import {shiQinCheckUserInfo} from "@/api/shiqinAPI.js";
import BetterCalendar from "../../components/shiqinComponents/timePick/timePick.vue"
import surname from "../surname/index.vue";

export default {
  name: "basicInformation",
  computed: {
    surname() {
      return surname
    }
  },
  components: {HeaderTitle, BetterCalendar},
  data() {
    const INIT_DAY_TYPE = "solar";
    const INIT_DAY_TIMESTAMP = this.$dayjs().valueOf();
    const INIT_DAY = this.$dayjs().format("YYYY-MM-DD");
    return {
      options: {},
      form: {
        name: '',
        surname: '',
        dateBirth: '',
        surnameFocusFlag: false,
        nameFocusFlag: false
      },
      showCalendar: false,
      date: {
        type: INIT_DAY_TYPE, // 类型
        timestamp: INIT_DAY_TIMESTAMP, // 时间戳
        solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
        lunarDate: "", // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
        lunarDateNumber: "", // 农历生日的数字写法（1999-12-25）
      },
    }
  },
  onLoad(options) {
    this.options = options
  },
  methods: {
    suernameInput(e) {
      if (e.target.value.length > 1) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.form, 'surname', arr.join('').substring(0, 2))
        } else {
          this.$set(this.form, 'surname', '')
        }
      }
    },
    surnameBlur(e) {
      if (e.target.value.length > 0) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.form, 'surname', arr.join('').substring(0, 2))
        } else {
          this.$set(this.form, 'surname', '')
        }
      }
    },
    nameInput(e) {
      if (e.target.value.length > 1) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.form, 'name', arr.join('').substring(0, 4))
        } else {
          this.$set(this.form, 'name', '')
        }
      }
    },
    nameBlur(e) {
      if (e.target.value.length > 0) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.form, 'name', arr.join('').substring(0, 4))
        } else {
          this.$set(this.form, 'name', '')
        }
      }
    },
    surnameFocus() {
      this.form.surnameFocusFlag = false;
      setTimeout(() => {
        this.form.surnameFocusFlag = true
      }, 100)
    },
    nameFocus() {
      this.form.nameFocusFlag = false;
      setTimeout(() => {
        this.form.nameFocusFlag = true
      }, 100)
    },
    openBetterCalendar() {
      this.showCalendar = true;
    },
    async selectDate(e) {
      this.date = await {
        type: e.type,
        timestamp: this.$dayjs(e.solarDate).valueOf(),
        solarDate: e.solarDate,
        lunarDate: e.lunarDate,
        lunarDateNumber: e.lunarDateNumber,
        isLeap: e.isLeap, // 一年里是否有闰月
      };
      this.form.dateBirth = e.solarDate
      this.showCalendar = false;
    },
    goToPath() {
      if(!this.form.surname){
        uni.showToast({
          title:'请填写您的尊姓 例如：刘',
          icon:'none',
          duration:2500
        })
        return
      }
      if(!this.form.name){
        uni.showToast({
          title:'请填写您的大名 例如：德华',
          icon:'none',
          duration:2500
        })
        return
      }
      if(!this.form.dateBirth){
        uni.showToast({
          title:'请点击选择您的生日',
          icon:'none',
          duration:2500
        })
        return
      }
      uni.showLoading({
        title: '创建中...'
      })
      shiQinCheckUserInfo({
        // 1男 2女
        sex: this.options.sex,
        // 姓
        surname: this.form.surname,
        // 名
        daimyo: this.form.name,
        // 出生日期
        date: this.form.dateBirth,
        // 1公历 2农历
        type: this.date.type == 'solar' ? 1 : 2
      }).then(res => {
        uni.hideLoading()
        if(res.status == '200'){
          this.$nav.swichNav('/pages/family/index')
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
      })
      // this.$nav.swichNav('/pages/family/index')
    }
  },
}
</script>

<style scoped lang="scss">
.basicInformation {
  width: 750rpx;
  min-height: 100vh;
  overflow: hidden;
  //background: red;
  .bag {
    width: 750rpx;
    position: absolute;
    top: 0;
    left: 0;

    .bag_image {
      width: 750rpx;
    }
  }

  .tips {
    width: 662rpx;
    align-items: flex-end !important;

    &_overText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #000000;
    }

    &_littleText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B; //A0A0A0
    }

    &_colorText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FF4206;
    }
  }


  .basicInformation_content {
    width: 662rpx;

    .basicInformation_content_surname {
      .basicInformation_content_surname_left {
        .basicInformation_content_surname_left_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 38rpx;
          color: #4B4B4B;
        }
      }

      .basicInformation_content_surname_right {
        width: 295rpx;
        height: 100rpx;
        background: #FFFFFF;
        border-radius: 50rpx 50rpx 50rpx 50rpx;

        .basicInformation_input {
          width: 285rpx;
          text-align: center;
          font-size: 36rpx;
        }

        /deep/ .placeholder {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #9F9F9F;
          line-height: 0rpx;
        }
      }
    }
  }

  .basicInformation_dateBirth {
    width: 662rpx;

    .basicInformation_dateBirth_left {
      .basicInformation_dateBirth_left_text {
        font-weight: 500;
        font-size: 38rpx;
        color: #4B4B4B;
      }
    }

    .basicInformation_dateBirth_right {
      width: 662rpx;
      height: 100rpx;
      background: #FFFFFF;
      border-radius: 50rpx 50rpx 50rpx 50rpx;

      .basicInformation_dateBirth_right_text {
        font-weight: 500;
        font-size: 32rpx;
        color: #9F9F9F;
      }
    }
  }

  .basicInformation_finish {
    width: 362rpx;
    height: 100rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;

    &_text {
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }


  .timePopup {
    width: 750rpx;
  }
}
</style>